<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>二维码信息展示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 30px auto;
      padding: 0 20px;
      color: #333;
    }

    .photo {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
    }

    .info-item {
      display: flex;
      align-items: center;
      margin: 8px 0;
      font-size: 16px;
    }

    .label {
      font-weight: bold;
      color: #555;
      width: 100px;
      display: inline-block;
    }

    .warning-box {
      border: 1.5px solid #e74c3c;
      background: #fdecea;
      color: #c0392b;
      padding: 16px 20px;
      border-radius: 6px;
      margin-bottom: 24px;
      font-size: 17px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .warning-box p {
      margin: 0;
    }
  </style>
</head>
<body>

<h2>二维码扫描信息</h2>

<!--  警告 二维码信息已失效-->

<div class="warning-box" id="warning-box">
  <p>当前二维码已失效，请重新申请并通过考试！</p>
</div>

<img id="photo" class="photo" src="" alt="用户照片"/>

<div id="info"></div>
<script>
  const info = {
    realName: '姓名',
    phone: '手机号',
    idCard: '身份证号',
    companyName: '公司名称',
    jobType: '工种',
    workAreaName: '工作区域',
    entryTime: '入厂时间',
    leaveTime: '离厂时间',
    allPassTip: '是否通过',
    createTime: '申请时间',
    photoUrl: '照片URL',
    healthProofUrl: '健康证明',
    noCriminalProofUrl: '无犯罪证明',
    certificatePhotosUrl: '资质证明',
  };


  function getQueryParams() {
    const params = new URLSearchParams(window.location.search);
    const queryData = {};
    for (const key in info) {
      if (params.has(key)) {
        queryData[key] = params.get(key);
      } else {
        queryData[key] = '无'; // 如果没有对应的参数，设置为空字符串
      }
    }
    return queryData;
  }

  let showWarning = false; // 控制是否显示警告框
  const photoEl = document.getElementById('photo');
  const warningBox = document.getElementById('warning-box');
  warningBox.style.display = 'none';
  const data = getQueryParams();
  // 获取当前时间
  const currentTime = new Date().toLocaleString();
  // 获取离场时间
  const leaveTime = data.leaveTime;
  // 比较当前时间和离场时间
  if (leaveTime && new Date(currentTime) > new Date(leaveTime)) {
    photoEl.style.display = 'none';
    warningBox.style.display = 'block';
    showWarning = true; // 设置为 true，表示需要显示警告框
  }

  if (!showWarning) {
    // 设置照片，如果没有传 photoUrl，显示默认图片或者空白
    if (data.photoUrl) {
      photoEl.src = decodeURIComponent(data.photoUrl);
    } else {
      photoEl.alt = "无照片";
      photoEl.style.display = 'none';
    }
    const infoEl = document.getElementById('info');
    // 动态生成信息项
    for (const key in info) {
      if (key === 'photoUrl') continue; // 跳过照片URL
      const value = data[key] || ''; // 如果没有对应的参数，设置为“无”
      const item = document.createElement('div');
      item.className = 'info-item';
      // 特殊处理健康证明、无犯罪证明和资质证明的图片
      if (key.includes('Url')) {
        if (value) {
          const img = document.createElement('img');
          // img.src = decodeURIComponent(value);
          img.src = 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png';
          img.style.width = '100px'; // 设置图片宽度
          img.style.height = '100px'; // 设置图片高度
          img.style.objectFit = 'cover'; // 保持图片比例
          img.alt = info[key];
          item.innerHTML = `<span class="label">${info[key]}:</span>`;
          item.appendChild(img);
        } else {
          item.innerHTML = `<span class="label">${info[key]}:</span> 无`;
        }
      } else {
        // 普通文本信息项
        item.innerHTML = `<span class="label">${info[key]}:</span> <span>${value}</span>`;
      }


      infoEl.appendChild(item);
    }
  }


</script>

</body>
</html>
